<!DOCTYPE html>
<!--html manifest="space.manifest"-->
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />

	<title>Space Crack</title>
	<link rel="apple-touch-icon" media="screen and (resolution: 163dpi)" href="gfx/space_icon-57.png" />
	<link rel="apple-touch-icon" media="screen and (resolution: 132dpi)" href="gfx/space_icon-72.png" />
	<link rel="apple-touch-icon" media="screen and (resolution: 326dpi)" href="gfx/space_icon-114.png" />
	<link rel="apple-touch-startup-image" href="splash/space_splash.png" />

	<script src="/jquery/jquery-1.7.2.js"></script>
<script>

function buildSystem(data) {
	var system = document.createElement("div");
	$(system).attr("id", "system-"+ data.id);
	$(system).addClass("game-system");
	$(system).css({top: data.y +"px", left: data.x +"px"});

	var control = document.createElement("div");
	$(control).addClass("system-control");
	$(control).appendTo(system);

	var planet = document.createElement("div");
	$(planet).addClass("system-planet");
	$(planet).appendTo(system);

	var info = document.createElement("div");
	$(info).addClass("system-info");
	$(info).appendTo(system);

	var force = document.createElement("div");
	$(force).addClass("info-force");
	$(force).html(data.force);
	$(force).appendTo(info);
	var factories = document.createElement("div");
	$(factories).addClass("info-factories");
	$(factories).html(data.factories);
	$(factories).appendTo(info);
	var name = document.createElement("div");
	$(name).addClass("info-name");
	$(name).html(data.name);
	$(name).appendTo(info);

	return system;
}

$(document).ready(function() {
	var id = 0;
	for (var i = -3; i <= 3; ++i) {
		for (var j = -3; j <= 3; ++j) {
			if ((i+j) % 2) continue;
			var data = {};
			data.id = id++;
			data.name = "Axxor "+ id;
			data.x = i * 80;
			data.y = j * 80;
			data.force = Math.floor(Math.random()* 100);
			data.factories = Math.floor(Math.random()* 100);
			$(buildSystem(data)).appendTo("#viewport");
		}
	}

	setInterval(function() {
		var i = 0;//Math.floor(Math.random()*24);
		var system = "#system-"+ i;
		var x = parseInt($(system).css("left"));
		var y = parseInt($(system).css("top"));
//		var x = Math.floor(Math.random()*7-3)*80;
//		var y = Math.floor(Math.random()*7-3)*80;
		console.log(i +":"+ x +" "+ y);

		$("#viewport").animate({marginTop: -y, marginLeft: -x});

		var dx = Math.random()<.5?80:-80;
		var dy = Math.random()<.5?80:-80;
		var fleet = document.createElement("div");
		$(fleet).addClass("system-fleet");
		$(fleet).appendTo(system);
		$(fleet).animate({top:dy, left:dx}, function() {
			$(this).remove();
		});
	}, 2000);
});

</script>
<style type="text/css">

body {
	margin: 0px;
	background-color: #E0E0E0;
}
#game-board {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#viewport {
	position: absolute;
	top: 50%;
	left: 50%;
}
#view-filter {
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url(gfx/filter.png);
	back ground-repeat: no-repeat;
	back ground-position: center;
	background-size: 100% 100%;
}

.game-system {
	position: absolute;
	width: 64px;
	height: 64px;
	margin: -32px;
}
.game-system .system-control {
	position: absolute;
	width: 64px;
	height: 64px;
	background-image: url(gfx/p0/system-target.png), url(gfx/p1/system-control.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;

	transform: rotate(60deg);
	-moz-transform: rotate(60deg);
	-webkit-transform: translate(0px, 16px) scale(1, .5) rotate(30deg);
}
.game-system .system-planet {
	position: absolute;
	width: 64px;
	height: 64px;
	background-image: url(gfx/system64.png);
}
.game-system .system-info {
	position: absolute;
	width: 160px;
	margin: 0px -80px;
	bottom: 100%;
	left: 50%;
	border: 1px black solid;
	border-radius: 9px;
	background-color: #E0E0E0;
	line-height: 16px;
	z-index: 10;
}

.system-info .info-name {
	text-align: center;
	font-weight: bold;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.system-info .info-force {
	wid th: 32px;
	text-align: left;

	background-image: url(gfx/ship16.png);
	background-position: left;
	background-repeat: no-repeat;
	padding: 0px 0px 0px 18px;
	float: left;
}
.system-info .info-factories {
	wi dth: 32px;
	text-align: right;

	background-image: url(gfx/factory16.png);
	background-position: right;
	background-repeat: no-repeat;
	padding: 0px 18px 0px 0px;
	float: right;
}
.system-fleet {
	position: absolute;
	width: 16px;
	height: 16px;
	margin: -8px;
	background-image: url(gfx/ship16.png);
}

.game-button {
	position: absolute;
	width: 80px;
	height: 80px;
	text-align: center;
	line-height: 80px;
	background-color: #404040;
	z-index: 99;
	bor der: 5px solid gold;
}
#game-menu {
	top: 0px;
	left: 0px;
	border-bottom-right-radius: 40px;
}
#game-messages {
	top: 0px;
	right: 0px;
	border-bottom-left-radius: 40px;
}
#game-action {
	bottom: 0px;
	left: 0px;
	border-top-right-radius: 40px;
}
#game-end {
	bottom: 0px;
	right: 0px;
	border-top-left-radius: 40px;
}
#game-zoomin {
	bottom: 0px;
	left: 80px;
	width: 40px;
	height: 40px;
	line-height: 40px;
	border-top-right-radius: 20px;
}
#game-zoomout {
	bottom: 0px;
	right: 80px;
	width: 40px;
	height: 40px;
	line-height: 40px;
	border-top-left-radius: 20px;
}

</style>
</head> 
<body> 

<div id="game-board">
<div id="viewport"></div><!-- viewport -->

<div id="view-filter"></div>

<div class="game-button" id="game-menu">Menu</div>
<div class="game-button" id="game-messages">Messages</div>
<div class="game-button" id="game-action">Action</div>
<div class="game-button" id="game-zoomin">+</div>
<div class="game-button" id="game-zoomout">-</div>
<div class="game-button" id="game-end">End</div>

</div><!-- game-board -->

</body>
</html>
